<template>
  <div class="w-full content">
    <van-tabs v-model:active="active" sticky @change="handleItemChange">
      <van-tab v-for="(item, index) in tabsList" :title="item.name">
        <div class="flex items-center w-full bg-[#F0F7FF] h-44px">
          <div class="text-14px ml-20px">
            订单记账总额：{{ Info.total_money }}，订单数量：{{ Info.total_num }}
          </div>
        </div>
        <div class="pb-6.875rem">
          <div
            class="pt-1.25rem pl-1.25rem pr-1.25rem pb-1.25rem bg-white mb-1.25rem"
            v-for="(item, i) in Info.data"
          >
            <div
              class="pb-0.625rem border-b flex justify-between text-0.875rem items-center"
            >
              <div class="text-[#999999]">订单号：{{ item.pp_order_no }}</div>
              <div class="text-[#F9363C]">
                <span v-show="item.state == 1 && item.type == 1">待付款</span>
                <span v-show="item.state == 1 && item.type == 0"
                  >待买家付款</span
                >
                <span v-show="item.state == 2 && item.type == 0">待收款</span>
                <span v-show="item.state == 2 && item.type == 1"
                  >待卖家收款</span
                >
                <span v-show="item.state == 3">待上架</span>
                <span v-show="item.state == 4">已出售</span>
              </div>
            </div>
            <div
              class="mt-0.625rem flex justify-between w-full pb-0.625rem border-b"
            >
              <div>
                <van-image
                  width="5.5rem"
                  height="4.875rem"
                  fit="contain"
                  :src="item.goods_image"
                />
              </div>
              <div class="flex flex-col text-0.875rem">
                <div class="mt-0.25rem">{{ item.goods_name }}</div>
                <div class="mt-0.25rem">{{ item.goods_no }}</div>
                <div class="mt-0.25rem flex items-center">
                  <div class="text-[#2E95FF]">{{ item.sell_name }}</div>
                  <div
                    class="ml-0.625rem bg-[#F9363C] rounded-0.3125rem w-3rem h-1.25rem flex justify-center items-center text-white"
                  >
                    卖家
                  </div>
                </div>
                <div
                  class="mt-0.25rem text-[#7C7C7C]"
                  @click="copy(item.sell_no)"
                >
                  卖家邀请码(点击复制)
                </div>
                <div
                  class="mt-0.25rem text-[#7C7C7C]"
                  @click="copy(item.sell_no)"
                >
                  {{ item.sell_no }}
                </div>
                <div class="mt-0.25rem flex items-center">
                  <div class="text-[#2E95FF]">{{ item.buy_name }}</div>
                  <div
                    class="ml-0.625rem bg-[#0CB031] rounded-0.3125rem w-3rem h-1.25rem flex justify-center items-center text-white"
                  >
                    买家
                  </div>
                </div>
                <div
                  class="mt-0.25rem text-[#7C7C7C]"
                  @click="copy(item.buy_no)"
                >
                  买家邀请码(点击复制)
                </div>
                <div
                  class="mt-0.25rem text-[#7C7C7C]"
                  @click="copy(item.buy_no)"
                >
                  {{ item.buy_no }}
                </div>
              </div>
              <div class="text-14px text-[#F9363C]">
                <div>
                  <div>价格：</div>
                  <div class="mt-0.3125rem">¥{{ item.price }}</div>
                </div>
                <div class="mt-1.25rem">
                  <div>应付：</div>
                  <div class="mt-0.3125rem">¥{{ item.price }}</div>
                </div>
              </div>
            </div>
            <div class="mt-0.625rem text-0.875rem">
              <div class="text-[#999999]">下单时间：{{ item.create_time }}</div>
              <div
                class="w-full flex justify-between items-center mt-0.4375rem"
                v-if="item.upper_time || item.pay_time || item.true_time"
              >
                <div class="text-[#999999]">
                  更新时间：
                  <span>{{
                    item.upper_time
                      ? item.upper_time
                      : item.true_time
                      ? item.true_time
                      : item.pay_time
                      ? item.pay_time
                      : ""
                  }}</span>
                </div>
                <div class="text-[#999999]">
                  运费：¥ <span class="text-[#F9363C]">0</span>
                </div>
              </div>
              <div class="mt-0.4375rem flex justify-end items-center">
                <div class="text-[#999999]">
                  实付：¥ <span class="text-[#F9363C]">{{ item.price }}</span>
                </div>
                <div class="text-[#999999]">
                  实付：¥ <span class="text-[#F9363C]">{{ item.price }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
  <div v-if="Info.data.length <= 0">
    <nodata></nodata>
  </div>
  <pagination
    @back="back"
    @next="next"
    :current_page="Info.current_page"
    :last_page="Info.last_page"
    :per_page="Info.per_page"
    :total="Info.total"
  ></pagination>
</template>
<script setup>
import pagination from "@/components/pagination.vue";
import { showImagePreview, showToast } from "vant";
import nodata from "@/components/nodata.vue";
import { userTotalOrder } from "@/util/api";
import order from "@/components/order.vue";
import h5Copy from "@/util/junyi-h5-copy";
import { reactive } from "vue";
const Info = reactive({
  current_page: 0,
  last_page: 0,
  per_page: 0,
  total: 0,
  data: [],
  total_money: 0,
  total_num: 0,
});
const popupShow = ref(false);
const tabsList = ref([
  { name: "全部" },
  { name: "待付款" },
  { name: "待收款" },
  { name: "待上架" },
  { name: "已出售" },
]);
const radioChecked = ref("0");
const active = ref("0");
const param = reactive({
  page: 1,
  state: 0,
});
const getData = async () => {
  const res = await userTotalOrder(param);
  for (let i in Info) {
    Info[i] = res.msg[i];
  }
  // console.log(Info);
};
const handleItemChange = (v) => {
  param.state = v;
  getData();
};

const back = () => {
  param.page--;
  getData();
};
const next = () => {
  param.page++;
  getData();
};
const copy = (val) => {
  const res = h5Copy(val);
  if (res) {
    showToast("复制成功");
  } else {
    showToast("复制失败");
  }
};
</script>
<style scoped lang="scss">
:deep(.van-swipe__track) {
  width: 200px !important;
}
:deep(.van-swipe-item) {
  width: 200px !important;
}
:deep(.image) {
  vertical-align: bottom !important;
}
</style>
